{include file="public/header"}
<style type="text/css">
  .uploader-list {

    margin-left: -15px;

  }

  .uploader-list .info {

    position: relative;

    margin-top: -25px;

    background-color: black;

    color: white;

    filter: alpha(Opacity=80);

    -moz-opacity: 0.5;

    opacity: 0.5;

    width: 100px;

    height: 25px;

    text-align: center;

    display: none;

  }

  .uploader-list .handle {

    position: relative;

    background-color: black;

    color: white;

    filter: alpha(Opacity=80);

    -moz-opacity: 0.5;

    opacity: 0.5;

    width: 100%;

    text-align: right;

    height: 20%;

    margin-bottom: -20%;

    display: none;

  }

  .layui-table td,
  .layui-table th {
    min-width: 100px !important;
  }

  .uploader-list .handle i {

    margin-right: 5px;

  }

  .uploader-list .handle i:hover {

    cursor: pointer;

  }

  .uploader-list .file-iteme {

    margin: 12px 0 0 15px;

    padding: 1px;

    float: left;

  }
</style>

<body>
  <div class="layui-fluid">
    <div class="layui-row">
      <form action="" method="post" class="layui-form layui-form-pane">
        <div class="layui-card">
          <div class="layui-card-header">客户信息</div>
          <div class="layui-card-body layui-row layui-col-space10">
            <div class="layui-col-md6">
              <input type="text" name="name" value="{$row.name|default=''}" disabled placeholder="收货人姓名"
                autocomplete="off" class="layui-input">
            </div>
            <div class="layui-col-md6">
              <input type="number" name="mobile" value="{$row.mobile|default=''}" disabled placeholder="收货人联系电话"
                class="layui-input">
            </div>
          </div>
          <div class="layui-card-body layui-row layui-col-space10" id="area-picker">
            <div class="layui-col-md4">
              <select name="province" disabled class="province-selector" data-value="{$row.province|default=''}"
                lay-filter="province-1">
                <option value="">请选择省</option>
              </select>
            </div>
            <div class="layui-col-md4">
              <select name="city" class="city-selector" disabled data-value="{$row.city|default=''}"
                lay-filter="city-1">
                <option value="">请选择市</option>
              </select>
            </div>
            <div class="layui-col-md4">
              <select name="area" class="county-selector" disabled data-value="{$row.area|default=''}"
                lay-filter="county-1">
                <option value="">请选择区</option>
              </select>
            </div>
            <div class="layui-col-md12">
              <input type="text" name="address" disabled value="{$row.address|default=''}" required=""
                lay-verify="required" autocomplete="off" class="layui-input" placeholder="详细地址" />
            </div>
          </div>
        </div>
        <div class="layui-card layui-form" lay-filter="component-form-element">
          <div class="layui-card-header">付款图片</div>
          <div class="layui-card-body layui-row layui-col-space10">
            <div class="layui-col-md12">
              <div class="layui-upload">
                {if $row.review == 1 || $row.review == 2}<button type="button"
                  class="layui-btn layui-btn-normal  layui-btn-sm" id="test">上传付款凭证</button>{/if}
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">
                  付款图片：
                  <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">
                    {if !empty($row.images)}
                    {foreach $row.images as $v}
                    <div class="file-iteme">
                      <div class="handle" style="display: none;">
                        <i class="layui-icon layui-icon-delete"></i>
                      </div>
                      <img style="width: 200px" src="{$v}">
                      <input type="hidden" name="images[]" value="{$v}">
                    </div>
                    {/foreach}
                    {/if}
                  </div>
                </blockquote>
                {if $row.review == 1 || $row.review == 2} <input type="hidden" name="id"
                  value="{$row.id|default='0'}" />
                <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" style="float: right"
                  lay-filter="payment">确认已付款</button>{/if}
              </div>
            </div>
          </div>
        </div>
        <div class="layui-card layui-form" lay-filter="component-form-element">
          <div class="layui-card-header">商品明细</div>
          <div class="layui-card-body layui-table-body layui-table-main">
            <div class="layui-col-md12">
              {if $row.status == 1}<a class="layui-btn layui-btn-btn layui-btn-sm" onclick="ifarme()">修改商品</a>{/if}
              <table class="layui-table layui-form" id="table" lay-filter="table">
                <thead>
                  <tr>
                    <td>
                      <div class="layui-table-cell">商品</div>
                    </td>
                    <td>
                      <div class="layui-table-cell">商品名</div>
                    </td>
                    <td>
                      <div class="layui-table-cell">单位</div>
                    </td>
                    <td>
                      <div class="layui-table-cell">数量</div>
                    </td>
                    <td>
                      <div class="layui-table-cell">单价</div>
                    </td>
                    <td>
                      <div class="layui-table-cell">合计</div>
                    </td>
                    {if $row.status == 1}
                    <td>
                      <div class="layui-table-cell">操作</div>
                    </td>
                    {/if}
                  </tr>
                </thead>
                <tbody>
                  {foreach $row.goods as $goods}
                  <tr>
                    <td><img style="height:50px;" src="{$goods.images.0|default=''}" alt="{$goods.name|default=''}">
                    </td>
                    <td>
                      <div class="layui-table">{$goods.name|default=''}</div>
                    </td>
                    <td>
                      <div class="layui-table">{$goods.unmit|default=''}</div>
                    </td>
                    <td>
                      <div class="layui-table">{if $row.status == 1}<input type="number" onblur="onblursort(this)"
                          name="goodsid[{$goods.goodsid|default='0'}][number]" required="" lay-verify="required"
                          class="layui-input number"
                          value="{$goods.number|default=''}">{else}{$goods.number|default='0'}{/if}</div>
                    </td>
                    <td>
                      <div class="layui-table">{if $row.status == 1}<input type="number" onblur="onblursort(this)"
                          name="goodsid[{$goods.goodsid|default='0'}][price]" required="" lay-verify="required"
                          class="layui-input price"
                          value="{$goods.price|default='0'}">{else}{$goods.price|default='0'}{/if}</div>
                    </td>
                    <td>
                      <div class="layui-table total">{$goods.total}</div>
                    </td>
                    {if $row.status == 1}
                    <td><input type="hidden" class="goodsid" name="goodsid[{$goods.goodsid|default='0'}][id]"
                        value="{$goods.goodsid|default='0'}" lay-skin="primary"><a
                        class="layui-btn layui-btn-danger layui-btn-xs del2">删除</a></td>
                    {/if}
                  </tr>
                  {/foreach}
                </tbody>
              </table>
              <a>计总：<span id="totals">{$row.total}</span>元</a>
              {if $row.status == 1} <input type="hidden" name="id" value="{$row.id|default='0'}" />
              <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" style="float: right"
                lay-filter="add">确认修改商品</button>{/if}
            </div>
          </div>
        </div>
        <div class="layui-card layui-form" lay-filter="component-form-element">
          <div class="layui-card-header">订单备注</div>
          <div class="layui-card-body layui-row layui-col-space10">
            <div class="layui-col-md12"> {$row.descs|default='无'}
            </div>
          </div>
        </div>
        {if empty(input('get.pay'))}
        <div class="layui-form-item layui-layout-admin">
          <div class="layui-input-block">
            <div class="layui-footer" style="left: 0;">
              {switch row.status}
              {case 1}
              <a title="订单审核" onclick="orderstatus(this,'/order/list_edit','{$row.id}','3','2')" href="javascript:;"
                class="layui-btn layui-btn layui-btn-sm">
                订单审核
              </a>
              <a title="取消订单" onclick="orderstatus(this,'/order/list_edit','{$row.id}','3','6')" href="javascript:;"
                class="layui-btn-danger layui-btn layui-btn-sm">
                取消订单
              </a>
              {/case}

              {case 2}
              <a title="取消审核" onclick="orderstatus(this,'/order/list_edit','{$row.id}','3','1')" href="javascript:;"
                class="layui-btn layui-btn layui-btn-sm">
                取消审核
              </a>
              <a title="订单出库" onclick="orderstatus(this,'/order/list_edit','{$row.id}','3','3')" href="javascript:;"
                class="layui-btn-normal layui-btn layui-btn-sm">
                订单出库
              </a>
              <a title="取消订单" onclick="orderstatus(this,'/order/list_edit','{$row.id}','3','6')" href="javascript:;"
                class="layui-btn-danger layui-btn layui-btn-sm">
                取消订单
              </a>
              {/case}

              {case 3}
              <a title="取消出库" onclick="orderstatus(this,'/order/list_edit','{$row.id}','3','2')" href="javascript:;"
                class="layui-btn-danger layui-btn layui-btn-sm">
                取消出库
              </a>
              <a title="订单发货" onclick="orderstatus(this,'/order/list_edit','{$row.id}','3','4')" href="javascript:;"
                class="layui-btn-normal layui-btn layui-btn-sm">
                订单发货
              </a>
              {/case}
              {case 4}
              <a title="取消发货" onclick="orderstatus(this,'/order/list_edit','{$row.id}','3','3')" href="javascript:;"
                class="layui-btn layui-btn layui-btn-sm">
                取消发货
              </a>
              <a title="完成订单" onclick="orderstatus(this,'/order/list_edit','{$row.id}','3','5')" href="javascript:;"
                class="layui-btn-normal layui-btn layui-btn-sm">
                完成订单
              </a>
              <a title="取消订单" onclick="orderstatus(this,'/order/list_edit','{$row.id}','3','6')" href="javascript:;"
                class="layui-btn-danger layui-btn layui-btn-sm">
                取消订单
              </a>
              {/case}
              {case 5}
              订单已完成
              {/case}
              {case 5}
              订单已取消
              {/case}
              {/switch}


            </div>
          </div>
        </div>
        {/if}
      </form>
    </div>
  </div>
  {include file="public/footer"}
  <script>
    $('body').on('click', '.del2', function () {
      $(this).closest('tr').remove();
    });
    // 删除图片
    $(document).on("click", ".file-iteme .handle", function (event) {
      $(this).parent().remove();
    });
    $(document).on("mouseenter mouseleave", ".file-iteme", function (event) {
      if (event.type === "mouseenter") {
        //鼠标悬浮
        $(this).children(".info").fadeIn("fast");
        $(this).children(".handle").fadeIn("fast");
      } else if (event.type === "mouseleave") {
        //鼠标离开
        $(this).children(".info").hide();
        $(this).children(".handle").hide();
      }
    });
    function orderstatus(obj, url, id, type, status) {
      var ids = [id];
      layer.confirm("确认要执行该操作吗？", function (index) {
        //发异步删除数据
        $.post(
          url, { id: ids, type: type, status: status },
          function (data) {
            if (data.status == 0) {
              layer.msg(data.msg, { icon: 1, time: 1000 }, function () {
                // 获得frame索引
                location.reload();
              });
            } else {
              layer.msg(data.msg, { icon: 2, time: 1000 });
            }
          },
          "json"
        );
      });
    }
    //输入框的值改变时触发
    layui.use(["form", "layer", "upload", 'layarea'], function () {
      $ = layui.jquery;
      var form = layui.form,
        upload = layui.upload,
        element = layui.element,
        layarea = layui.layarea,
        layer = layui.layer;
      layarea.render({
        elem: '#area-picker',
        change: function (res) {
          //选择结果
        }
      });
      $('.handle img').on('click', function () {
        console.log(111);
        layer.photos({
          photos: '#uploader-list',
          shadeClose: false,
          closeBtn: 2,
          anim: 0
        });
      })
      var demoListView = $('#demoList'),
        uploadListIns = upload.render({
          elem: '#test'
          , url: '/Base/upload_img'
          , multiple: true
          , before: function (obj) {
            layer.msg('图片上传中...', {
              icon: 16,
              shade: 0.01,
              time: 0
            })
          }
          , done: function (res) {
            if (res.status == 0) {
              //上传完毕
              $('#uploader-list').append(
                '<div id="" class="file-iteme">' +
                '<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
                '<img style="width: 200px;" src=' + res.data.src + '>' +
                '<input type="hidden" name="images[]" value="' + res.data.src + '"></div>'
              );
              // var images = [];
              // $('.file-iteme input').each(function (index, el) {
              //   images.push($(this).val());
              // });
            }
            layer.close(layer.msg());//关闭上传提示窗口
          }
        });
      //监听提交
      form.on("submit(payment)", function (data) {
        //发异步，把数据提交给php
        data.field.type = 2;
        $.ajax({
          type: "post",
          data: data.field,
          success: function (res) {
            if (res.status == 0) {
              layer.msg(res.msg, { icon: 6, time: 1000 }, function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                location.reload();
                // parent.layer.close(index);
              });
            } else {
              layer.msg(res.msg, { icon: 2, time: 1000 });
            }
          },
        });
        return false;
      });
      form.on("submit(add)", function (data) {
        //发异步，把数据提交给php
        data.field.type = 1;
        $.ajax({
          type: "post",
          data: data.field,
          success: function (res) {
            if (res.status == 0) {
              layer.msg(res.msg, { icon: 6, time: 1000 }, function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                location.reload();
                // parent.layer.close(index);
              });
            } else {
              layer.msg(res.msg, { icon: 2, time: 1000 });
            }
          },
        });
        return false;
      });
    });
    function onblursort(obj) {
      var total = 0;
      var itotal = 0;
      var number = $(obj).parents('tr').find(".number").val();
      var price = $(obj).parents('tr').find(".price").val();
      total = number * price;
      $(obj).parents('tr').find(".total").html(total);
      $(obj).parents('tbody').find("tr").each(function (e, i) {
        var inu = $(i).find(".number").val();
        var ipr = $(i).find(".price").val();
        itotal += inu * ipr;
        $("#totals").html(itotal);
      });
      console.log(555);
    }
    function ifarme() {
      layer.open({
        type: 2,
        content: '/shop/goods?ifarmeser=1',
        area: ["95%", "95%"],
        btn: ['确认', '取消'],
        yes: function (index, layero) {
          var body = layer.getChildFrame('body', index);
          var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象，执行iframe页的方法：
          var ids = iframeWin.delAll2();//调用子页面的方法，得到子页面返回的ids
          var haveid = [];
          // 获取选中的id 
          $('.goodsid').each(function (index, el) {
            haveid.push($(this).val());
          });
          var getid = [];
          $.each(ids, function (index, value) {
            if ($.inArray(value, haveid) < 0) {
              getid.push(value);
            }
          });
          //发异步，把数据提交给php
          $.ajax({
            url: '/base/getgoods',
            type: "get",
            data: { id: getid },
            success: function (res) {
              if (res.status == 0) {
                var html = '';
                $.each(res.data, function (index, value) {
                  html += '<tr><td><img style="height:50px;"src="' + value.images + '"alt="' + value.title + '"></td><td><div class="layui-table">' + value.title + '</div></td><td><div class="layui-table">' + value.unmit + '</div></td><td><div class="layui-table"><input type="number" onblur="onblursort(this)" name="goodsid[' + value.id + '][number]"    required="" lay-verify="required" class="layui-input number" value="0"></div></td><td><div class="layui-table"><input type="number" name="goodsid[' + value.id + '][price]"    required="" lay-verify="required" class="layui-input price" onblur="onblursort(this)" value="' + value.price + '"></div></td><td><div class="layui-table"><div class="total">0</div></div></td><td><input type="hidden" class="goodsid" name="goodsid[' + value.id + '][id]" value="' + value.id + '"lay-skin="primary"><a class="layui-btn layui-btn-danger layui-btn-xs del2">删除</a></td></tr>';
                });
                $(html).appendTo($('#table tbody:last'));
                layui.use(['form'], function () {
                  $ = layui.jquery;
                  var form = layui.form;
                  form.render();
                });
                layer.close(index);
              } else {
                layer.msg('添加失败，请重试', { icon: 2, time: 1000 });
              }
            },
          });
          return false;
        }
      });
    }
  </script>
</body>